<template>
  <div
    class="echarts"
    id="timeecharts"
    ref="chartRefnul"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import type { PieSeriesOption } from "echarts/charts";
import type {
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
} from "echarts/components";
import type { ComposeOption } from "echarts/core";

type ECOption = ComposeOption<
  | PieSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | ToolboxComponentOption
>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  SVGRenderer,
]);
const props = defineProps<{
  brknowledgesName: [];
  rates: [];
}>();
const chartRefnul = ref<HTMLElement | null>(null);

onMounted(() => {

  if (chartRefnul.value) {
    const chart = echarts.init(
      chartRefnul.value,
      null,
      { renderer: "svg" } // ⚠️ 必须指定 SVG 渲染器
    );
    // There should not be negative values in rawData
    const rawData = [props.rates];
    // const totalData = [];
    // for (let i = 0; i < rawData[0].length; ++i) {
    //   let sum = 0;
    //   for (let j = 0; j < rawData.length; ++j) {
    //     sum += rawData[j][i];
    //   }
    //   totalData.push(sum);
    // }

    const grid = {
      left: 130,
      right: 100,
      top: 50,
      bottom: 40,
    };
    // 定义颜色的深浅范围，这里以蓝色为例
    const lightColor = "#AED2F8";
    const darkColor = "#0375F9";

    const getColor = (value: any, min: any, max: any) => {
      const ratio = (value - min) / (max - min);
      const r1 = parseInt(lightColor.slice(1, 3), 16);
      const g1 = parseInt(lightColor.slice(3, 5), 16);
      const b1 = parseInt(lightColor.slice(5, 7), 16);
      const r2 = parseInt(darkColor.slice(1, 3), 16);
      const g2 = parseInt(darkColor.slice(3, 5), 16);
      const b2 = parseInt(darkColor.slice(5, 7), 16);
      const r = Math.round(r1 + (r2 - r1) * ratio);
      const g = Math.round(g1 + (g2 - g1) * ratio);
      const b = Math.round(b1 + (b2 - b1) * ratio);
      return `#${r.toString(16).padStart(2, "0")}${g
       .toString(16)
       .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
    };

    const minValue = Math.min(...rawData[0]);
    const maxValue = Math.max(...rawData[0]);
    const colorArray = [
      "#BDEFDB",
      "#5AD8A6 ",
      "#BDD2FD",
      "#5B8FF9",
      "#FF99C3",
      "#269A99",
      "#FF9D4D",
      "#9270CA",
      "#6DC8EC",
      "#E8684A",
      "#F6BD16",
      "#5D7092",
      "#5B8FF9",
      "#46A9A8",
    ];
    // const barColors1 = ["#AED2F8", "#4BA0F7", "#7CBAF7", "#0375F9", "#AED2F8"];
    // const seriesColors = ["#5AD8A6", "#5B8FF9 "]; // 定义每个系列对应的颜色
    const series = [
      {
        //   name: 'Data 1',
        type: "bar",
        // radius: ["0%", "65%"],
        //   center: ["50%", "40%"],
        barWidth: 20,
        label: {
          show: true,
          position: "right", // 将数值显示在柱子顶部
        },
        data: rawData[0].map((value, index) => ({
          value,
          itemStyle: {
            color: colorArray[index % colorArray.length],
          },
        })),
      },
    ];
    const option = {
      legend: {
        right: "10%", // 距离图表右侧 10% 的位置
      },
      tooltip: {
        trigger: "axis",
      },
      //   yAxis: {
      //     //   min: 0, // 若需要可以设置最小值，这里设置为 0
      //     max: 100, // 设置 y 轴的最大值为 100
      //   },
      title: {
        text: "薄弱知识点",
        subtext: "学习指数",
        left:'10%'
      },
      grid,
      xAxis: {
        type: "value",
        // max: 100,
        // axisLine: {
        //   show: false
        // },
        axisLine: {
          show: false, // 隐藏 x 轴轴线
        },
        axisTick: {
          show: false, // 隐藏 x 轴刻度线
        },
        splitLine: {
          show: false, // 隐藏 x 轴网格线
        },
        axisLabel: {
          show: false, // 隐藏 x 轴的刻度标签
        },
      },
      yAxis: {
        type: "category",
        data: props.brknowledgesName,
        axisLine: {
          show: false, // 隐藏 x 轴轴线
        },
        axisTick: {
          show: false, // 隐藏 x 轴刻度线
        },
        splitLine: {
          show: false, // 隐藏 x 轴网格线
        },
        axisLabel: {
          // 限制标签宽度，超出部分显示省略号
          width: 100,
          overflow: "truncate",
          ellipsis: "...",
        },
        // categoryGap: '0%'
      },
      // yAxis: {
      //   // type: 'value',
      //   // max: 100 // 设置 y 轴的最大值为 100
      // },
      //   xAxis: {
      //     type: "category",
      //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      //   },
      series,

      barCategoryGap: "0%",
      // barCategoryGap: '0%'
    };

    chart.setOption(option);
    // 监听窗口大小变化事件
    window.addEventListener("resize", () => {
      chart.resize();
    });
  }
});
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>